Passing Strings and Numbers in React

Passing strings and numbers is a fundamental concept in React used to provide data to components through props. Props allow a parent component to send information to a child component so that the child can display or use that information.

React uses JSX syntax to pass strings and numbers to components. Strings are generally written inside quotation marks, while numbers are written inside curly braces.

Course: JustAcademy React JS Training Course

Course Demo: Register for React JS Course Demo

1. What Are Props in React?

Props stands for properties. They are used to pass data from one component to another, usually from a parent component to a child component. Props can contain strings, numbers, booleans, arrays, objects, functions, and other JavaScript values.

For example, a parent component can pass a student's name as a string and age as a number to a child component.

function Student(props) {
  return (
    <div>
      <h2>Name: {props.name}</h2>
      <p>Age: {props.age}</p>
    </div>
  );
}
function App() {
  return <Student name="Rahul" age={21} />;
}
export default App;

Output:

Name: Rahul
Age: 21

In this example, name="Rahul" passes a string, while age={21} passes a number.

2. Passing Strings in React

A string is a sequence of characters, such as a person's name, a city, a course title, or a message. In JSX, a string prop can be passed directly inside single or double quotation marks.

Syntax

<ComponentName propName="String Value" />

Example 1: Passing a String to a Component

function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}
function App() {
  return <Greeting name="Amit" />;
}
export default App;

Output: Hello, Amit!

Explanation:

• Greeting is a child component.
• name="Amit" passes the string value "Amit".
• props.name accesses the value inside the child component.
• React displays the greeting using the received value.

Example 2: Passing Multiple String Props

function Course(props) {
  return (
    <div>
      <h2>{props.title}</h2>
      <p>Instructor: {props.instructor}</p>
      <p>Mode: {props.mode}</p>
    </div>
  );
}
function App() {
  return (
    <Course
      title="React JS Training"
      instructor="Priya"
      mode="Online"
    />
  );
}
export default App;

Output:

React JS Training
Instructor: Priya
Mode: Online

This example passes three separate string props to the same component.

Example 3: Passing a String Through a JavaScript Variable

You can also store a string in a JavaScript variable and pass its value using curly braces.

function Message(props) {
  return <p>{props.text}</p>;
}
function App() {
  const message = "Welcome to React JS";
  return <Message text={message} />;
}
export default App;

Output: Welcome to React JS

Here, text={message} passes the value stored in the variable, not the literal text "message".

3. Passing Numbers in React

A number represents a numeric value, such as an age, price, quantity, score, or product rating. In JSX, numbers are typically passed inside curly braces because they are JavaScript values rather than string literals.

Syntax

<ComponentName propName={numberValue} />

Example 1: Passing a Number to a Component

function Student(props) {
  return <p>Age: {props.age}</p>;
}
function App() {
  return <Student age={22} />;
}
export default App;

Output: Age: 22

Explanation: The expression {22} evaluates to the JavaScript number 22, which is passed to the component as the age prop.

Example 2: Passing Multiple Number Props

function Product(props) {
  return (
    <div>
      <h2>{props.name}</h2>
      <p>Price: ₹{props.price}</p>
      <p>Quantity: {props.quantity}</p>
    </div>
  );
}
function App() {
  return (
    <Product
      name="Keyboard"
      price={1200}
      quantity={2}
    />
  );
}
export default App;

Output:

Keyboard
Price: ₹1200
Quantity: 2

The product name is a string, while the price and quantity are numbers. The rupee symbol is displayed as part of the text.

Example 3: Performing Calculations with Number Props

function Total(props) {
  return <p>Total: ₹{props.price * props.quantity}</p>;
}
function App() {
  return <Total price={500} quantity={3} />;
}
export default App;

Output: Total: ₹1500

Because both props are numbers, JavaScript can multiply them to calculate the total price.

4. Passing Strings and Numbers Together

A component can receive both string and number props at the same time. This is useful when displaying profiles, product details, course information, and student records.

Example

function Profile({ name, age, city, score }) {
  return (
    <div>
      <h2>Student Profile</h2>
      <p>Name: {name}</p>
      <p>Age: {age}</p>
      <p>City: {city}</p>
      <p>Score: {score}</p>
    </div>
  );
}
function App() {
  return (
    <Profile
      name="Neha"
      age={20}
      city="Mumbai"
      score={95}
    />
  );
}
export default App;

Output:

Student Profile
Name: Neha
Age: 20
City: Mumbai
Score: 95

In this example, name and city are strings, while age and score are numbers. The component uses destructuring to access the props directly.

5. Strings vs. Numbers in JSX

Important: The quotation marks in age="25" make the value a string, whereas age={25} passes a number.

6. Difference Between Quotes and Curly Braces

In JSX, quotation marks are used to pass a literal string, while curly braces let you evaluate a JavaScript expression.

function Example() {
  const name = "Riya";
  const age = 24;
  return (
    <div>
      <p>Literal string: {"Riya"}</p>
      <p>Variable value: {name}</p>
      <p>Number: {age}</p>
      <p>Calculation: {10 + 5}</p>
    </div>
  );
}

Output:

Literal string: Riya
Variable value: Riya
Number: 24
Calculation: 15

Remember that name="name" passes the literal word "name", but name={name} passes the value stored in the JavaScript variable.

7. Accessing Props Using Destructuring

Destructuring allows you to extract individual props directly from the component's parameter instead of repeatedly writing props.name or props.age.

Without Destructuring

function User(props) {
  return (
    <p>{props.name} is {props.age} years old.</p>
  );
}

With Destructuring

function User({ name, age }) {
  return (
    <p>{name} is {age} years old.</p>
  );
}

Both approaches work. Destructuring is often more concise and easier to read.

8. Using Strings and Numbers in Conditions

String and number props can also be used in conditions to control what a component displays.

Example

function Result({ name, marks }) {
  return (
    <div>
      <p>Student: {name}</p>
      <p>Marks: {marks}</p>
      <p>{marks >= 40 ? "Pass" : "Fail"}</p>
    </div>
  );
}
function App() {
  return <Result name="Arjun" marks={75} />;
}
export default App;

Output:

Student: Arjun
Marks: 75
Pass

The string prop supplies the student's name, while the number prop is compared with 40 to determine the result.

9. Common Mistakes When Passing Strings and Numbers

Mistake 1: Passing a Number as a String

<Student age="21" />

This passes the string "21", not the number 21. If numeric calculations are required, use:

<Student age={21} />

Mistake 2: Putting a Variable Name in Quotes

const name = "Amit";
<Greeting name="name" />

This passes the literal text "name". To pass the variable's value, use:

<Greeting name={name} />

Mistake 3: Forgetting Curly Braces Around a Number

<Product price="500" />

If the intended value is numeric, write price={500}.

Mistake 4: Trying to Modify Props

Props are read-only inputs. A component should not directly change them. If a value needs to change in response to user interaction, use React state or update the value in the parent component.

Mistake 5: Assuming Numbers Are Automatically Formatted

React displays a number, but it does not automatically add currency formatting, commas, or decimal places for every use case. Use JavaScript formatting tools such as Intl.NumberFormat when needed.

10. Best Practices

• Use quotation marks when passing literal string values.
• Use curly braces when passing numbers, variables, calculations, or other JavaScript expressions.
• Choose meaningful prop names such as name, price, quantity, and age.
• Use destructuring when it makes component code easier to understand.
• Keep the intended data type consistent, especially when passing values to calculations or conditions.
• Remember that displaying a number and formatting a number are different tasks.
• Treat props as read-only values.
• Use TypeScript or suitable runtime validation when a project needs stricter checks for prop types.

11. Practical Example: Course Information Card

This example combines string and number props to display information about a React training course.

function CourseCard({ title, duration, price, students }) {
  return (
    <div>
      <h2>{title}</h2>
      <p>Duration: {duration} months</p>
      <p>Price: ₹{price}</p>
      <p>Enrolled Students: {students}</p>
    </div>
  );
}
function App() {
  return (
    <CourseCard
      title="React JS Training"
      duration={3}
      price={15000}
      students={120}
    />
  );
}
export default App;

Output:

React JS Training
Duration: 3 months
Price: ₹15000
Enrolled Students: 120

The title is passed as a string, while duration, price, and students are passed as numbers.

12. Interview Questions and Answers

Q1. What are props in React?

Answer: Props are read-only inputs that allow a parent component to pass data to a child component.

Q2. How do you pass a string to a React component?

Answer: Pass a literal string in quotation marks, for example, .

Q3. How do you pass a number to a React component?

Answer: Pass the number inside curly braces, for example, .

Q4. What is the difference between age="21" and age={21}?

Answer: The first passes a string; the second passes a number.

Q5. Can a React component receive strings and numbers together?

Answer: Yes. A component can receive multiple props with different data types.

Q6. Why are curly braces used in JSX?

Answer: Curly braces let you use JavaScript expressions and values inside JSX.

Q7. Can we perform calculations using number props?

Answer: Yes. When the props contain numbers, JavaScript arithmetic can be performed using those values.

Q8. Can props be modified inside a child component?

Answer: No. Props should be treated as read-only. Use state or update the value in the parent when changes are needed.

13. Practice Exercises

1. Create a Greeting component that accepts a person's name as a string.
2. Create a Student component that accepts a student's name and age.
3. Create a Product component that accepts a product name, price, and quantity.
4. Create a Calculator component that receives two numbers and displays their sum.
5. Create a CourseCard component that displays a course title, duration, and fee.
6. Create a Result component that receives a student's name and marks and displays Pass or Fail.

14. Quick Revision Checklist

• Understand what props are and how parent-to-child data flow works.
• Know that literal string props use quotation marks.
• Know that numbers and JavaScript variables are commonly passed using curly braces.
• Understand the difference between a string containing digits and a numeric value.
• Practice reading props through props.propName and destructuring.
• Use strings for labels and names and numbers for numeric operations.
• Remember that props are read-only.

15. Official Documentation and Course Links

• React Official Documentation: Passing Props to a Component
• React Official Documentation: JavaScript in JSX with Curly Braces
• JustAcademy React JS Training Course
• Register for React JS Course Demo

Conclusion

Passing strings and numbers in React is an essential part of working with props. Strings are commonly passed in quotation marks, while numbers and JavaScript expressions are passed inside curly braces. Understanding this distinction helps you build reusable components, display data correctly, and perform calculations or conditional rendering in React applications.

For structured learning, explore the JustAcademy React JS Training Course or register for a course demo.